import React from "react";
import { connect } from "react-redux";
import { loadHotsRecommendDataAsync } from "@/components/main/index/actionCreator";
import Swiper from "@/components/common/swiper.jsx";
import { HostSrec } from "@/components/main/index/styled";
class HotsRecommend extends React.Component {
  render() {
    // console.log(this.props.hotsRecommendData.toJS());
    // console.log();
    if (this.props.hotsRecommendData.size !== 0) {
      return (
        <HostSrec>
          <div className="hot-block__lab">
            <h2>热门演出</h2>
            <a href="https://m.juooo.com/show/showsLibrary">&gt;</a>
          </div>
          <Swiper id={"tosction"} config={{
            slidesPerView: 3.1,
            spaceBetween: 30,
          }}>
            {
              this.props.hotsRecommendData.map((item, index) => (
                <div className="swiper-slide" key={index}>
                  <div className="data-v-8c510d6a" >
                    <img src={item.get("pic")} alt={item.get("show_name")} />
                    <p className="text-double">{item.get("show_name")}</p>
                   
                  </div>
                </div>
              ))
            }
            {/*  */}
          </Swiper>
        </HostSrec>
      );
    } else {
      return null;
    }

  }
  componentDidMount() {
    this.props.loadHotsRecommendDataAsync.bind(this)();
  }
}
const mapStateToProps = state => {
  return {
    currentCity: state.getIn(["indexReducer", "currentCity"]),
    hotsRecommendData: state.getIn(["indexReducer", "hotsRecommendData"])
  };
};
const mapDispatchToProps = dispatch => {
  return {
    loadHotsRecommendDataAsync() {
      loadHotsRecommendDataAsync(dispatch, {
        city_id: this.props.currentCity.get("city_id")
      });
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(HotsRecommend);

